import React, {useState} from "react"
import {ConfigProvider, Table, TableProps} from "antd";
import {
    AntdTableColumnRenders, castFilterValue,
    useTableFilterDateRangeColumnProps,
    useTableSearchTextColumnProps
} from "../utils/AntdTableUtils";
import {OrderSummary} from "../apis/OrderApi";
import CopyButton from "./CopyButton";
import {useNavigate} from "react-router";
import {useGlobalStyle} from "../global.style";

type T = OrderSummary

export interface OrderTableProps extends TableProps<T> {
    data: OrderSummary[]
    onDateRangeFilterChange:(startDate?:string,endDate?:string)=>void
}

export interface OrderTableOtherFilters{
    startDate?:string
    endDate?:string
}

function OrderTable(props: OrderTableProps) {
    let nameSearchProps = useTableSearchTextColumnProps<T>("name", {
        placeholder: "姓名"
    });
    let brandSearchProps = useTableSearchTextColumnProps<T>("brand", {
        placeholder: "品牌"
    });

    let modelSearchProps = useTableSearchTextColumnProps<T>("model", {
        placeholder: "型号"
    });
    let categorySearchProps = useTableSearchTextColumnProps<T>("category", {
        placeholder: "分类"
    });

    let navigate = useNavigate();
    let globalStyle = useGlobalStyle();

    const [startDate, setStartDate] = useState<string>()
    const [endDate, setEndDate] = useState<string>()
    return <ConfigProvider componentSize={"small"}>
        <Table<T> {...props} columns={
            [
                {
                    ...nameSearchProps,
                    dataIndex: "name",
                    title: "姓名",
                    sorter: true,
                    render: it => {
                        return <>{it}<CopyButton value={it}/></>
                    },
                    key: "name",
                },
                {
                    ...brandSearchProps,
                    dataIndex: "brand",
                    title: "品牌",
                    sorter: true,
                    key: "brand",
                },
                {
                    ...modelSearchProps,
                    dataIndex: "model",
                    title: "型号",
                    sorter: true,
                    render: it => {
                        return it ? <>{it}<CopyButton value={it}/></> : <></>
                    },
                    key: "model",
                },
                {
                    ...categorySearchProps,
                    dataIndex: "category",
                    title: "分类",
                    sorter: true,
                    key: "category",
                },
                {
                    dataIndex: "paymentDateTime",
                    title: "支付时间",
                    sorter: true,
                    key: "paymentDateTime",
                    render: AntdTableColumnRenders.dateTimeColumnRender
                },
                {
                    dataIndex: "createdDateTime",
                    title: "创建时间",
                    sorter: true,
                    key: "createdDateTime",
                    render: AntdTableColumnRenders.dateTimeColumnRender,
                    ...({
                        ...useTableFilterDateRangeColumnProps<OrderSummary>("createdDateTime", {
                            handleSearch: value => {
                                if (props.onDateRangeFilterChange){
                                    props.onDateRangeFilterChange(value ? value[0].format() : undefined,value ? value[1].format() : undefined)
                                }
                            }
                        })
                    })
                },
            ]
        }
                  dataSource={props.data}
                  className={globalStyle.rowClickableTable}
                  onRow={data => {
                      return {
                          onClick: () => {
                              navigate(`orders/${data.id}`)
                          }
                      }
                  }}
                  rowKey={"id"}/>
    </ConfigProvider>
}

export default OrderTable